<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画三角形</title>
    <style>
        /*    .box {
            width: 0;
            height: 0;
            border: 100px solid;
            border-color: orange blue red green;
        } */

        /* 
        三角形的实现：
        1.纯css实现
        要实现下三角   设置三个，上边框为高度是自身设定  底边是左右边框长度相加  左右边框透明          
        2.canvas 画布


         */

        div {
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;

        }
    </style>
</head>

<body>
    <div class="box">

    </div>

    <canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>

    <script>
        var canvas = document.getElementById("canvas");
        var cxt = canvas.getContext("2d");
        cxt.beginPath();
        cxt.moveTo(250, 50);
        cxt.lineTo(200, 200);
        cxt.lineTo(300, 300);
        cxt.closePath();//填充或闭合 需要先闭合路径才能画
        //空心三角形
        cxt.strokeStyle = "red";
        cxt.stroke();
        //实心三角形
        cxt.beginPath();
        cxt.moveTo(350, 50);
        cxt.lineTo(300, 200);
        cxt.lineTo(400, 300);
        cxt.closePath();
        cxt.fill();
    </script>
</body>

</html>